import { Row, Col } from 'antd';
import { findOrder, selectAll } from '../../..//Api/Api';
import { Chart, Tooltip, Legend, Point, Line, Interval } from 'bizcharts';
import { useState, useEffect } from 'react';
import './Summary.less';
let chartIns = null;
const scale = {
  people: {
    min: 0,
    tickCount: 4,
    alias: '人数',
    type: 'linear-strict',
  },
  waiting: {
    min: 0,
    tickCount: 4,
    alias: '等待',
    type: 'linear-strict',
  },
};
const colors = ['#6394f9', '#62daaa'];
export default function Summary() {
  const [length, setLength] = useState(0);
  const [day, setDay] = useState(0);
  const [sum, setSum] = useState(0);
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);
  const [data, setData] = useState<any[]>([]);
  useEffect(() => {
    findOrder({}).then((res) => {
      console.log(res, 123);
      let sum = 0;
      res.data.map((item) => {
        sum += item.totalOrder;
      });
      setSum(sum);
      setDay(res.data.length);
    });

    selectAll({}).then((res) => {
      let obj = {};
      setLength(res.data.length);
      let count = 0,
        count1 = 0,
        count2 = 0,
        count3 = 0;
      res.data.map((item) => {
        let date = '';
        if (item.orderStatus == 1) {
          count++;
        } else if (item.orderStatus == 2) {
          count1++;
        } else if (item.orderStatus == 3) {
          count2++;
        } else if (item.orderStatus == 14) {
          count3++;
        }
        date = item.createdAt.split('T')[0];
        if (!obj[date]) {
          obj[date] = [item.totalOrder];
        } else {
          obj[date].push(item.totalOrder);
        }
      });
      setCount(count);
      setCount1(count1);
      setCount2(count2);
      setCount3(count3);
      console.log(obj, 123);
      for (const key in obj) {
        console.log(key);
        const res = obj[key].reduce((value, item) => {
          return (value += item);
        });
        console.log(res, 1111111);
        obj[key] = { value: res, count: obj[key].length };
      }
      let arr = [];
      for (const key in obj) {
        let object1 = {
          date: key,
          name: '订单金额',
          订单金额: obj[key].value,
          订单数量: obj[key].count,
        };
        arr.push(object1);
      }
      console.log(arr, 88888888);
      setData(arr);
    });
  }, []);
  return (
    <div>
      <Row className="DataIndexModule">
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{length}</div>
            <div className="DataIndexModuleListName">订单数量</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{count}</div>
            <div className="DataIndexModuleListName">待付款</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{count1}</div>
            <div className="DataIndexModuleListName">待发货</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{count2}</div>
            <div className="DataIndexModuleListName">待评价</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{count3}</div>
            <div className="DataIndexModuleListName">维权中</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{day}</div>
            <div className="DataIndexModuleListName">今日下单量</div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={3}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListNumber">{sum}</div>
            <div className="DataIndexModuleListName">今日订单金额</div>
          </div>
        </Col>
      </Row>
      <div>
        <div className="title">订单金额与数量</div>
        <Chart
          scale={scale}
          autoFit
          height={400}
          data={data}
          onGetG2Instance={(chart) => {
            chartIns = chart;
            chartIns.on('interval:mouseenter', (e) => {
              console.log(chartIns);
              chartIns.geometries.forEach((g) => {
                if (g.type === 'interval') {
                  (g.getShapes() || []).forEach((s) => {
                    s.set('origin_fill', s.get('attrs').fill);
                    s.attr('fill', 'red');
                  });
                }
              });
            });
            chartIns.on('interval:mouseleave', (e) => {
              console.log(chartIns);
              chartIns.geometries.forEach((g) => {
                if (g.type === 'interval') {
                  (g.getShapes() || []).forEach((s) => {
                    s.attr('fill', s.get('origin_fill'));
                  });
                }
              });
            });
          }}
        >
          <Legend
            custom={true}
            allowAllCanceled={true}
            items={[
              {
                value: 'count',
                name: '订单数量',
                marker: {
                  symbol: 'square',
                  style: { fill: colors[0], r: 5 },
                },
              },
              {
                value: 'value',
                name: '订单金额',
                marker: {
                  symbol: 'hyphen',
                  style: { stroke: colors[1], r: 5, lineWidth: 3 },
                },
              },
            ]}
            onChange={(ev) => {
              const item = ev.item;
              const value = item.value;
              const checked = !item.unchecked;
              const geoms = chartIns.geometries;

              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];

                if (geom.getYScale().field === value) {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                }
              }
            }}
          />
          <Tooltip shared />
          <Interval position="date*订单数量" color={colors[0]} />
          <Line
            position="date*订单金额"
            color={colors[1]}
            size={3}
            shape="smooth"
          />
          <Point
            position="date*订单金额"
            color={colors[1]}
            size={3}
            shape="circle"
          />
        </Chart>
      </div>
    </div>
  );
}
